media queries - 02

code:

        <main>
            <!-- Content -->
        </main>
          
        <footer>
            <div class="addr">
                <h1 class="logo">text/image</h1>
                <h2>contact div</h2>
                <address> somewhere: number, street, city, country<br>
                    <a class="btn" href="mailto:[email protected]">send us an email</a>
                </address>
            </div>
            <ul class="nav">
                <li class="nav__item">
                    <h2 class="nav__title">media</h2>
                    <ul class="nav__ul">
                        <li><a href="#">online</a></li>
                        <li><a href="#">print</a></li>
                        <li><a href="#">alternative ads</a></li>
                    </ul>
                </li>           
                <li class="nav__item nav__item--extra">
                    <h2 class="nav__title">technology</h2>
                    <ul class="nav__ul nav__ul--extra">
                      <li><a href="#">hardware design</a></li>
                      <li><a href="#">software design</a></li>
                      <li><a href="#">digital signage</a></li>
                      <li><a href="#">automation</a></li>
                      <li><a href="#">artificial intelligence</a></li>
                      <li><a href="#">IoT</a></li>
                    </ul>
                </li>
                <li class="nav__item">
                    <h2 class="nav__title">legal</h2>
                    <ul class="nav__ul">
                      <li><a href="#">privacy policy</a></li>
                      <li><a href="#">terms of use</a></li>
                      <li><a href="#">sitemap</a></li>
                  </ul>
                </li>
            </ul>
                
                <div class="legal"><p>© 2019. All rights reserved.</p></div>
            </footer>
            <style>
                footer {display: flex;flex-flow: row wrap; width: 94vw; height: 40vh; color: black; position:relative; background-image: repeating-linear-gradient(50deg, black, yellow, red);
                    padding-left: 4vw;}
                footer > * {flex:  1 35%;}
                .addr {margin-bottom: 1vw; }
                .logo {font-family: Helvetica, sans-serif; font-weight: 400; text-transform: lowercase; font-size: 1.25vw;}
                .addr, h2 {margin-top: 1vw; font-size: 1.25vw;font-weight: 400;}
                .nav__title { font-weight: 400; font-size: 1.5vw; color: darkblue;}
                footer address {font-style: normal; color: darkgray;}
                .btn {display: flex; align-items: center; justify-content: center; height: 3vw; max-width: max-content; background-color:darkgreen;border-radius: 1vw; color: darkblue; 
                    line-height: 0; margin: 0.6vw 0; font-size: 1.25vw; padding: 1.3vw;}
                footer ul {list-style: none;padding-left: 0;}
                footer li {line-height: 1.5vw;}
                footer a {text-decoration: none;}
                .nav {display: flex; flex-flow: row nowrap;}
                .nav > * {flex: 1 35%;margin-right: 2vw;}
                .nav__ul a {color: black;}
                .nav__ul--extra {column-count: 2; width: 20vw; column-gap: 0.2vw; }
                .legal {display: flex; flex-wrap: wrap;color: darkgray;}
                
                @media screen and (min-width: 24.375em) {
                .legal .legal__links {margin-left: auto;}
                }

                @media screen and (min-width: 40.375em) {
                .footer__nav > * {flex: 1;}
                .nav__item--extra {flex-grow: 2;}
                .footer__addr {flex: 1 0vw;}
                .footer__nav { flex: 2 0vw;}
                }
            </style>